<!--
 * @Description: 发货订单弹框
-->
<template>
  <el-dialog title="发货" :visible.sync="dialogVisible" width="30%" @closed="handleClose" @open="handleOpen">
    <el-form :model="formData" :rules="rules" ref="ruleForm" label-width="80px">
      <el-form-item label="发货方式" prop="expressWay">
        <el-select v-model="formData.expressWay">
          <el-option label="物流快递" :value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="物流商" prop="expressageId">
        <el-select v-model="formData.expressageId">
          <el-option v-for="item in expressageNameList" :key="item.no" :label="item.com" :value="item.no" />
        </el-select>
      </el-form-item>
      <el-form-item label="物流单号" prop="expressageCode">
        <el-input v-model="formData.expressageCode"></el-input>
      </el-form-item>
    </el-form>

    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="confirmHandle">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { upDeliverOrderExchange, queryLogistics } from '@/api/exchangeOrder';

export default {
  props: {
    show: { type: Boolean, default: false },
    detail: { type: Object, default: () => ({}) },
  },
  data() {
    return {
      formData: {
        expressWay: 1,
        expressageId: '',
        expressageCode: '',
        expressageName: ''
      },
      expressageNameList: [],
      rules: {
        expressWay: [
          { required: true, message: '请选择发货方式', trigger: 'change' },
        ],
        expressageId: [
          { required: true, message: '请输入物流商', trigger: 'blur' },
        ],
        expressageCode: [
          { required: true, message: '请输入物流编号', trigger: 'blur' },
        ],
      },
    };
  },
  computed: {
    dialogVisible: {
      get() {
        return this.show;
      },
      set(val) {
        this.$emit('update:show', val);
      },
    },
  },
  methods: {
    confirmHandle() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          if(this.detail.uuid) {
            const curExp = this.expressageNameList.find(item => item.no == this.formData.expressageId);
            upDeliverOrderExchange({
              uuid: this.detail.uuid,
              expressageId: this.formData.expressageId,
              expressageName: curExp.com,
              expressageCode: this.formData.expressageCode
            }).then(res => {
              if(res.code == 1) {
                this.$message.success('保存成功');
                this.dialogVisible = false;
                this.$emit('refresh');
              }
            })
          }
        }
      });
    },
    handleClose() {
      this.$refs.ruleForm.resetFields();
    },

    handleOpen() {
      queryLogistics().then(res => {
        this.expressageNameList = res.result;
      })
      const arr = ['expressageId', 'expressageCode']
      arr.forEach(item => {
        this.formData[item] = this.detail[item] || '';
      });
    },
  }
};
</script>

<style lang="scss" scoped></style>
